// pages/template/mdl/components/classify-menu/classify-menu.ts
Component<
  {
    dataList: string[];
    classifyList: string[];
    /**
     * 分类滚动容器是否使用fixed布局. 默认:false
     */
    classifyScrollViewFixed: boolean;
    /**
     * 组件需要使用的css变量
     */
    cssVar: string;
  },
  {
    pageScrollTop: {
      type: NumberConstructor;
      value: 0;
      observer: (newVal: number) => void;
    };
    pageScrollTopFlag: {
      type: NumberConstructor;
      value: 0;
    };
    /**
     * 顶部导航加分割面板高度
     */
    topNavSplitPanelHeight: {
      type: NumberConstructor;
      value: 0;
      observer: (newVal: number) => void;
    };
    /**
     * 分类面板使用fixed定位之后, 应该设置的top值
     */
    classifyFixedTop: {
      type: NumberConstructor;
      value: 0;
      observer: (newVal: number) => void;
    };
  },
  {
    onPageScroll: (scrollTop: number) => void;
    buildCssVar: () => void;
  }
>({
  /**
   * 组件的属性列表
   */
  properties: {
    pageScrollTop: {
      type: Number,
      value: 0,
      observer(newVal: number) {
        this.onPageScroll(newVal);
      },
    },
    pageScrollTopFlag: {
      type: Number,
      value: 0,
    },
    topNavSplitPanelHeight: {
      type: Number,
      value: 0,
      observer() {
        wx.nextTick(() => {
          this.buildCssVar();
        });
      },
    },
    classifyFixedTop: {
      type: Number,
      value: 0,
      observer() {
        wx.nextTick(() => {
          this.buildCssVar();
        });
      },
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    dataList: new Array(100).fill(true).map((_, idx) => `第${idx}条数据`),
    classifyList: new Array(30).fill(true).map((_, idx) => `第${idx}个分类`),
    classifyScrollViewFixed: false,
    cssVar: "",
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onPageScroll(scrollTop: number) {
      if (scrollTop <= 0 || scrollTop < this.properties.pageScrollTopFlag) {
        this.setData({
          classifyScrollViewFixed: false,
        });
      } else {
        this.setData({
          classifyScrollViewFixed: true,
        });
      }
    },
    buildCssVar() {
      let cssVar = "";
      cssVar += `--classifyFixedTop:${this.properties.classifyFixedTop}px;`;
      cssVar += `--topNavSplitPanelHeight:${this.properties.topNavSplitPanelHeight}px;`;
      this.setData({ cssVar });
    },
  },
});
